<template>
  <div class="chatRoom">
    <div class="chatRoom_body">
      <div class="chatRoom_body_top"><backTopName :chatList="chatList"/></div>
      <div class="chatRoom_body_middle">
        <div class="wrap">
<!--          <div class="timer">{{ getTime }}</div>-->
          <div class="content_box" id="box" ref="scrollBox">

            <div
                :class="item.messageType == '2' ? 'userbox2' : 'userbox'"
                v-for="(item, index) in chatList"
                :key="index"
            >
              <div :class="item.messageType == '2' ? 'receiveName' : 'sendName'">
                <div style="font-size: 14px;color: #c2c2c2;">{{ item.createTime }}</div>
                <div :class="item.messageType == '2' ? 'contentText2' : 'contentText'">
                  {{ item.content }}
                </div>
              </div>
              <div>
                <van-image round width="50px" height="50px" src="https://img01.yzcdn.cn/vant/cat.jpeg" >{{item.id}}</van-image>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chatRoom_body_bottom"><chatRoomBootom /></div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from 'vue'
import chatRoomBootom from "@/components/commiunication/chatRoomBootom/chatRoomBootom.vue";
import backTopName from "@/components/commonComponents/backTopName.vue";
import axios from "axios";
export default {
  name: "chatRoom",
  components: { backTopName, chatRoomBootom },
  data(){
    return{
      chatList: [],
      appuserInfo:{},
      getTime:'',
      //输入内容
      inputValue: "",
      //滚动条距离顶部距离
      scrollTop:0
    }
  },
  created() {
    const options = {
      method: 'GET',
      url: 'http://106.54.189.155:6768/chat/intoRoomByList',
      //没有数据暂时先使用id17的chatroom作为演示
      params: {id: '17'},
      headers: {Accept: '*/*'}
    };
    axios.request(options).then(response=>{
      this.chatList=response.data.data;
      console.log(response.data);
    }).catch(function (error) {
      console.error(error);
    });
  },
  mounted(){
      //获取当前时间
      const _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      //let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.getTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf;

    this.setPageScrollTo()
    //创建监听内容部分滚动条滚动
    this.$refs.scrollBox.addEventListener('scroll',this.srTop)
  },
  methods:{
    //滚动条默认滚动到最底部
    setPageScrollTo(s, c) {
      //获取中间内容盒子的可见区域高度
      this.scrollTop = document.querySelector("#box").offsetHeight;
      setTimeout((res) => {
        //加个定时器，防止上面高度没获取到，再获取一遍。
        if (this.scrollTop != this.$refs.scrollBox.offsetHeight) {
          this.scrollTop = document.querySelector("#box").offsetHeight;
        }
      }, 100);
      //scrollTop：滚动条距离顶部的距离。
      //把上面获取到的高度座位距离，把滚动条顶到最底部
      this.$refs.scrollBox.scrollTop = this.scrollTop;
    },
    //滚动条到达顶部
    srTop(){
      //判断：当滚动条距离顶部为0时代表滚动到顶部了
      if(this.$refs.scrollBox.scrollTop==0){
        //逻辑简介：
        //到顶部后请求后端的方法，获取第二页的聊天记录，然后插入到现在的聊天数据前面。
        //如何插入前面：可以先把获取的数据保存在 A 变量内，然后 this.chatList=A.concat(this.chatList)把数组合并进来就可以了
        //拿聊天记录逻辑:
        //第一次调用一个请求拉历史聊天记录，发请求时参数带上页数 1 传过去，拿到的就是第一页的聊天记录
        //然后向上滚动到顶部时，触发新的请求，在请求中把分页数先 +1 然后再请求，这就拿到了第二页数据，然后通过concat合并数组插入进前面
        console.log('到顶了，滚动条位置 :',this.$refs.scrollBox.scrollTop);
      }
    },
  },

};
</script>

<style lang="scss" scope>
.chatRoom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background-color: #fafafa;
  overflow-y: scroll;
  overflow-x: hidden;
  &_body {
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    &_top {
      flex: none;
    }
    &_middle {
      height: 70%;
      background-color: #fafafa;
      overflow-y: scroll;
      width: 100%;
    }
    &_bottom {
      flex: 1;
      min-height: 136px;
      overflow: hidden;
    }
  }
}
.content_box {
  /*
  中间栏计算高度，110是包含了上下固定的两个元素高度90
  这里padding：10px造成的上下够加了10，把盒子撑大了，所以一共是20要减掉
  然后不知道是边框还是组件的原因，导致多出了一些，这里再减去5px刚好。不然会出现滚动条到顶或者底部的时候再滚动的话就会报一个错，或者出现滚动条变长一下的bug
  */
  height: calc(100% - 115px);
  overflow: auto;
  padding: 10px;
}
.timer {
  font-size: 2px;
  color: #c2c2c2;
}
/* 发送的信息样式 */
/*
右边消息思路解释：首先大盒子userbox内放两个盒子，一个放头像，一个放用户名和发送的内容，我们先用flex让他横向排列。
然后把写文字的大盒子设置flex：1。这个属性的意思就是让这个元素撑满父盒子剩余位置。然后我们再把文字盒子设置flex，并把他对齐方式设置为尾部对齐就完成了基本的结构
*/
.userbox {
  width: 100%;
  display: flex;
  margin-bottom: 10px;

}
.sendName {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-right: 10px;
  /* 用align-items把元素靠右对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contentText {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}

/* 接收的信息样式 */
/*
跟上面一样，就是换一下位置，首先通过把最外层大盒子的排列方式通过flex-direction: row-reverse;属性翻转，也就是头像和文字盒子换位置
然后删除掉尾部对齐方式，因为不写这个默认是左对齐的。
*/
.userbox2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10px;
}
.receiveName {
  /* 用flex：1把盒子撑开 */
  flex: 1;
  margin-left: 10px;
}
.contentText2 {
  background-color: #9eea6a;
  /* 把内容部分改为行内块元素，因为盒子flex：1把盒子撑大了，所以用行内块元素让内容宽度不根据父盒子来 */
  display: inline-block;
  /* 这四句是圆角 */
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  /* 最大宽度限定内容输入到百分61换行 */
  max-width: 61%;
  padding: 5px 10px;
  /* 忽略多余的空白，只保留一个空白 */
  white-space: normal;
  /* 换行显示全部字符 */
  word-break: break-all;
  margin-top: 3px;
  font-size: 14px;
}


</style>
